<template>
<div id="printCom">
        <!--后退-->
        <img class="back" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <div class="printComList">
            <section class="fileType">
                <p v-if="fileData.upFile=='docx'"><img src="../../assets/tabber/word1.png" alt=""></p>
                <p v-if="fileData.upFile=='pptx'"><img src="../../assets/tabber/ppt.png" alt=""></p>
                <p v-if="fileData.upFile=='pdf'"><img src="../../assets/tabber/pdf.png" alt=""></p>
                <p v-if="fileData.upFile=='xlsx'"><img src="../../assets/tabber/file-xls.png" alt=""></p>
                <p v-if="fileData.upFile=='txt'"><img src="../../assets/tabber/txt.png" alt=""></p>
                <p v-if="fileData.upFile=='jpg'"><img src="../../assets/tabber/jpg.png" alt=""></p>
                <p>{{fileData.fileName}}</p>
            </section>
            <!--页数-->
            <section class="fileList">
                <select v-model="beginFilePage">
                    <option v-for="n in 15" :value="n">{{n}}</option>
                </select>
                <select  v-model="endFilePage">
                    <option v-for="n in 15" :value="n">{{n}}</option>
                </select>
            </section>
            <!--尺寸-->
            <div class="hhh">
                <select class="pageSize" v-model="pageClass">
                    <option v-for="item in pageType" :value="item">{{item}}</option>
                </select>
            </div>
            <!--打印商家-->
            <div class="hhh">
                <select class="printBussies" v-model="printShopClass">
                    <option v-for="item in printShop" :value="item.name">{{item.name}}</option>
                </select>
            </div>
            <!--单双面-->
            <section class="surface">
                <p v-for="(item,index) in surface" :class="{active:isActive==index}" @click="surfaceSel(index)">{{item.name}}</p>
            </section>
            <!--是否配送-->
            <section class="distribution">
                 <p v-for="(item,index) in claim" :class="{claim:isClaim==index}" @click="claimSel(index)">{{item.name}}</p>
            </section>
            <div class="setting">
                <section class="number">
                    <p>
                        <span>数量：</span>
                        <el-input-number v-model="quantity" size="mini" @change="handleChange" :min="1"  label="描述文字"></el-input-number>
                    </p>
                    <p>
                        <span>单面：0.15￥</span>
                        <span>双面：0.3￥</span>
                    </p>
                </section>
                <!--高级设置-->
                <div class="advanced">
                    <p @click="concrete">高级设置</p>
                    <div v-show="concreteSet" class="concreteSet">
                        <section>
                            <p v-for="(item,index) in pageDemand" :class="{demand:isDemand==index}" @click="printDemand(index)">{{item.name}}</p>
                        </section>
                        <section>
                            <p v-for="(item,index) in printColor" :class="{color:isColor==index}" @click="colorSel(index)">{{item.name}}</p>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <p class="nextStep" @click="nextStep">上一步</p>
        <section class="clearMoney">
            <p>总计:{{totalNum}}</p>
            <p @click="sureFile">确定</p>
        </section>
</div>
</template>
<script>
export default {
  data() {
      return {
        concreteSet:false,
        surface:[
            {name:'单面',price:'0.2'},
            {name:'双面',price:'1.8'}
        ],
        claim:[
            {name:'不配送',price:'0.0'},
            {name:'配送+1￥',price:'1.0'}
        ],
        printColor:[
            {name:'黑白',price:'0.2'},
            {name:'彩色',price:'1.8'}
            
        ],
        pageDemand:[
            {name:'无缩印要求',price:'1.0'},
            {name:'六版缩印加框',price:'1.0'},
            {name:'九版缩印加框',price:'1.0'},
        ],
        printShop:{},
        pageType:[
            'A4','B5'
        ],
        beginFilePage:'1',
        endFilePage:1,
        pageClass:'A4',
        quantity:1,
        printShopClass:'',
        //点击状态
        isActive:0,
        isClaim:0,
        isColor:0,
        isDemand:0,
        //计算价格
        surfaceNum:0.2,//单双面
        surfaceName:'单面',
        distrNum:0,//是否配送
        distrName:'不配送',
        colorNum:0.2,//黑白彩色
        colorName:'黑白',
        demandNum:1,//打印要求
        demandName:'无缩印要求',
        totalNum:0,//价格
        fileData:{

        },
        forms:{
            common1:undefined,
            common2:undefined,
        },
        shopName:'',
      };
    },
    created(){
        this.getParams()
        this.printFile()
        this.getMerchantList()
    },
    watch:{
        surfaceNum:function(val){
            this.printFile()
        },
        distrNum:function(val){
            this.printFile()
        },
        colorNum:function(val){
            this.printFile()
        },
        demandNum:function(val){
            this.printFile()
        },
        quantity:function(val){
            this.printFile()
        },
        totalNum:function(val){
            this.printFile()
        },
        endFilePage:function(val){
            this.printFile()
        },
        beginFilePage:function(val){
            this.printFile()
        },
        
    },
    methods: {
        
        sureFile(){
            this.forms.amount=this.totalNum;
            this.forms.common1=this.fileData.fileName;
            this.forms.common2=this.pageClass+this.surfaceName+this.endFilePage+this.beginFilePage+this.demandName;
            this.forms.common5=this.shopName;
            this.forms.common7=this.fileData.fileUrl;
            this.$api.printTask(this.forms).then((res)=>{
                if(res.code == '000000'){
                    this.$router.push('/cueMsg')
                }
            })
        },
        //获取上一个传下来的文件数据
        getParams() {
            this.fileData=this.$route.query.data;
            
        },
        //获取商家列表
        getMerchantList(){
            this.$api.merchantList().then((res)=>{
                if(res.code == '000000'){
                    this.printShop=res.data
                    this.printShopClass=this.printShop[0].name
                    this.printShop.forEach((item)=>{
                        this.shopName=item.id
                    })
                }
            })
        },
        //监听
        printFile(){
            let numberFile=0;
            numberFile=(Number(this.surfaceNum)+Number(this.colorNum)+Number(this.demandNum))*(this.endFilePage-this.beginFilePage+1)*Number(this.quantity)+Number(this.distrNum)
            this.totalNum=Math.abs(numberFile.toFixed(2))
        },
        //打印要求
        printDemand(index){
           this.isDemand=index;
           this.demandNum=this.pageDemand[index].price;
           this.demandName=this.pageDemand[index].name;
        },
        //单双面
        surfaceSel(index){
            this.isActive=index;
            this.surfaceNum=this.surface[index].price;
            this.surfaceName=this.surface[index].name;
        },
        //是否配送
        claimSel(index){
            this.isClaim=index;
            this.distrNum=this.claim[index].price;
            this.distrName=this.claim[index].name;
        },
        //打印颜色
        colorSel(index){
            this.isColor=index;
            this.colorNum=this.printColor[index].price;  
            this.colorName=this.printColor[index].name;  
        },
        //高级设置
        concrete(){
            this.concreteSet=!this.concreteSet;
        },
        nextStep(){
            this.$router.push('/print')
        },
        handleChange(value) {

        },
        handleConfirmPage(){

        },
        handleConfirmPageLa(){

        },
        beginPage(){
            this.$refs.Page.open();
        },
        endPage(){
            this.$refs.PageLa.open();
        },
    }
}
</script>
<style>
#printCom{
    height:100%;
    width:100%;
    font-size:0.8rem;
    background-size:100% 100%;
    background-image:url(../../assets/tabber/printbg.png);
}
#printCom .back{
    margin:1rem 1rem 2rem 1rem;
    height:1.2rem;
    width:0.675rem;
}
#printCom .printComList{
    width:93%;
    border-radius:0.8rem;
    margin:auto;
    background:#fff;
    padding:1rem;
    box-shadow:1px 1px 5px 1px #e2e2e2;
}
#printCom .printComList .fileType{
    text-align:center;
    
}
#printCom .printComList .fileType > p:nth-child(1){
    width:6rem;
    height:6rem;
    margin:auto;
    text-align:center;
    line-height:6rem;
    border-radius:50%;
    background:#fff;
    margin-top:-3rem;
}
#printCom .printComList .fileType > p:nth-child(1) >img{
    width:3.5rem;
}
#printCom .printComList .fileList{
    background:#f6f6f6;
    margin:1rem 0 1rem;
    padding:0 1rem;
    font-size:0;
    text-align:center;
    display:flex;
    justify-content:space-between;
}
#printCom .printComList .fileList select:nth-child(1){
    border: none;1
    outline: none;
    height:2rem;
    line-height:2rem;
    font-size:0.8rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#printCom .printComList .fileList select:nth-child(2){
    border: none;1
    outline: none;
    height:2rem;
    line-height:2rem;
    font-size:0.8rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#printCom .printComList .fileList select option{
    padding-left:50%;
}
#printCom .printComList .fileList .timeSel > input {
    width:40%;
    text-align:center;
}
#printCom .printComList .pageSize{
    border: none;
    outline: none;
    background:#f6f6f6;
    margin-bottom:1rem;
    padding:0 1rem;
    width:100%;
    padding:0 1rem;
    height:2rem;
    line-height:2rem;
    font-size:0.8rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#printCom .printComList .printBussies{
    border: none;
    outline: none;
    background:#f6f6f6;
    margin-bottom:1rem;
    padding:0 1rem;
    width:100%;
    padding:0 1rem;
    height:2rem;
    line-height:2rem;
    font-size:0.8rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
#printCom .printComList .hhh::after{
    content: url(../../assets/me/next-D.png);
    position:absolute;
    right:10%;
    margin-top:0.5rem;
}
#printCom .printComList .surface{
    display:flex;
    height:2rem;
    line-height:2rem;
    letter-spacing:0.5rem;
    text-align:center;
    margin-bottom:1rem;
    justify-content:space-between;
}
#printCom .printComList .surface > p{
    width:35%;
    background:#f6f6f6;
    color:#858585;
}
#printCom .printComList .surface .active{
    border:1px solid #29a193;
    background:#fff;
    color:#000;
}
#printCom .printComList .distribution{
    display:flex;
    height:2rem;
    line-height:2rem;
    letter-spacing:0.1rem;
    text-align:center;
    margin-bottom:1rem;
    justify-content:space-between;
}
#printCom .printComList .distribution .claim{
    border:1px solid #29a193;
    background:#fff;
    color:#000;
}
#printCom .printComList .distribution > p{
    width:35%;
    background:#f6f6f6;
    color:#858585;
}
#printCom .printComList .setting{
    display:flex;
    justify-content:space-between;
}
#printCom .printComList .setting .number{
    line-height:2.5rem;
    color:#858585;
}
#printCom .printComList .setting .number p:nth-child(1){
    color:#29a193;
}
#printCom .printComList .setting .advanced{
    width:35%;
}
#printCom .printComList .setting .advanced >p{
    height:2rem;
    line-height:2rem;
    margin-top:1.2rem;
    text-align:center;
    background:#29a193;
    color:#fff;
    border-radius:0.5rem;
}
#printCom .printComList .setting .advanced .concreteSet{
    width:85%;
    background:#fff;
    position:absolute;
    right:8%;
    padding:1rem;
    line-height:1.2rem;
    border:1px solid #29a193;
    border-radius:8px;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(1){
    display:flex;
    justify-content:space-between;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(1) > p{
    width:30%;
    height:3rem;
    line-height:3rem;
    text-align:center;
    color:#29a193;
    background:#f6f6f6;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(1) > p >span{
    width:30%;
    height:1rem;
    display:inline-block;
    text-align:center;
    color:#29a193;
    background:#fff;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(2){
    display:flex;
    justify-content:space-between;
    padding:1rem 0;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(2) .color{
    border:1px solid #29a193;
    background:#fff;
    color:#000;
}
#printCom .printComList .setting .advanced .concreteSet section:nth-child(2) > p{
    width:40%;
    background:#f6f6f6;
    height:2rem;
    line-height:2rem;
    color:#858585;
    text-align:center;

}
#printCom .nextStep{
    width:50%;
    text-align:center;
    margin:1rem auto;
    height:2rem;
    line-height:2rem;
    background:#fff;
    color:#29a193;
    border-radius:0.3rem;
}
#printCom .demand{
    border:0.05rem solid #29a193;
}
#printCom .clearMoney{
    display:flex;
    width:80%;
    height:2.5rem;
    line-height:2.5rem;
    margin-left:10%;
    position:absolute;
    bottom:1%;
    letter-spacing:0.3rem;
    justify-content:space-between;
}
#printCom .clearMoney > p:nth-child(1){
    width:40%;
    text-align:center;
    color:#29a193;
}
#printCom .clearMoney > p:nth-child(2){
    width:40%;
    text-align:center;
    background:#29a193;
    color:#fff;
    border-radius:0.5rem;
}
</style>